@import '@/styles/variables.scss';

<template>
  <div class="page-container solutions-container">
    <!-- Banner组件 -->
    <page-banner
      title="解决方案"
      description="为您提供专业的行业解决方案，助力企业数字化转型"
      background-image="/images/solutions-banner.jpg"
      background-color="#2d4a8e"
    />
    
    <div class="solutions-content">
      <!-- LLM应用平台 -->
      <section id="llm" class="solution-section" v-if="llmSolutions.length > 0" ref="llmSection">
        <div class="section-header">
          <h2>LLM应用平台</h2>
          <p class="section-desc">基于大语言模型的智能应用平台，助力企业实现智能化升级转型</p>
        </div>
        <el-row :gutter="30">
          <el-col 
            v-for="solution in llmSolutions" 
            :key="solution.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <solution-card 
              :solution="solution"
              @click="showDetail(solution)"
            />
          </el-col>
        </el-row>
      </section>

      <!-- VDI解决方案 -->
      <section id="vdi" class="solution-section" v-if="vdiSolutions.length > 0" ref="vdiSection">
        <div class="section-header">
          <h2>VDI解决方案</h2>
          <p class="section-desc">提供安全、高效的虚拟桌面基础架构解决方案，实现随时随地的办公访问</p>
        </div>
        <el-row :gutter="30">
          <el-col 
            v-for="solution in vdiSolutions" 
            :key="solution.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <solution-card 
              :solution="solution"
              @click="showDetail(solution)"
            />
          </el-col>
        </el-row>
      </section>

      <!-- 云计算解决方案 -->
      <section id="cloud" class="solution-section" v-if="cloudSolutions.length > 0" ref="cloudSection">
        <div class="section-header">
          <h2>云计算解决方案</h2>
          <p class="section-desc">提供全面的云计算解决方案，帮助企业构建灵活、高效的IT基础设施</p>
        </div>
        <el-row :gutter="30">
          <el-col 
            v-for="solution in cloudSolutions" 
            :key="solution.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <solution-card 
              :solution="solution"
              @click="showDetail(solution)"
            />
          </el-col>
        </el-row>
      </section>

      <!-- 数据中心解决方案 -->
      <section id="idc" class="solution-section" v-if="idcSolutions.length > 0" ref="idcSection">
        <div class="section-header">
          <h2>数据中心解决方案</h2>
          <p class="section-desc">为企业提供专业的数据中心规划、建设和运维服务，保障业务稳定运行</p>
        </div>
        <el-row :gutter="30">
          <el-col 
            v-for="solution in idcSolutions" 
            :key="solution.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <solution-card 
              :solution="solution"
              @click="showDetail(solution)"
            />
          </el-col>
        </el-row>
      </section>

      <!-- 其他解决方案 -->
      <section id="other" class="solution-section" v-if="otherSolutions.length > 0" ref="otherSection">
        <div class="section-header">
          <h2>其他解决方案</h2>
          <p class="section-desc">更多创新解决方案，满足您的个性化需求</p>
        </div>
        <el-row :gutter="30">
          <el-col 
            v-for="solution in otherSolutions" 
            :key="solution.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <solution-card 
              :solution="solution"
              @click="showDetail(solution)"
            />
          </el-col>
        </el-row>
      </section>
    </div>

    <!-- 详情对话框 -->
    <solution-detail
      v-model:visible="dialogVisible"
      :solution="currentSolution"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { getSolutionList } from '@/api/solutions'
import SolutionCard from './components/SolutionCard.vue'
import SolutionDetail from './components/SolutionDetail.vue'
import PageBanner from '@/components/PageBanner.vue'

const route = useRoute()
const solutionsList = ref([])
const dialogVisible = ref(false)
const currentSolution = ref(null)

// 添加ref引用
const llmSection = ref(null)
const vdiSection = ref(null)
const cloudSection = ref(null)
const idcSection = ref(null)
const otherSection = ref(null)

// 按类型分类解决方案
const llmSolutions = computed(() => 
  solutionsList.value.filter(solution => 
    solution.type?.toUpperCase() === 'LLM'
  )
)

const vdiSolutions = computed(() => 
  solutionsList.value.filter(solution => 
    solution.type?.toUpperCase() === 'VDI'
  )
)

const cloudSolutions = computed(() => 
  solutionsList.value.filter(solution => 
    solution.type?.toUpperCase() === 'CLOUD'
  )
)

const idcSolutions = computed(() => 
  solutionsList.value.filter(solution => 
    solution.type?.toUpperCase() === 'IDC'
  )
)

const otherSolutions = computed(() => 
  solutionsList.value.filter(solution => 
    !['LLM', 'VDI', 'CLOUD', 'IDC'].includes(solution.type?.toUpperCase())
  )
)

// 获取解决方案列表
const fetchSolutionsList = async () => {
  try {
    const res = await getSolutionList()
    solutionsList.value = res.data
    // 数据加载完成后，检查是否需要滚动到指定位置
    await nextTick()
    scrollToSection()
  } catch (error) {
    console.error('获取解决方案列表失败:', error)
  }
}

// 显示详情
const showDetail = (solution) => {
  currentSolution.value = solution
  dialogVisible.value = true
}

// 滚动到指定区域
const scrollToSection = () => {
  const hash = route.hash.slice(1) // 移除#号
  if (hash) {
    const sectionMap = {
      'llm': llmSection,
      'vdi': vdiSection,
      'cloud': cloudSection,
      'idc': idcSection,
      'other': otherSection
    }
    
    const targetRef = sectionMap[hash]
    if (targetRef?.value) {
      targetRef.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }
}

// 监听路由变化
const handleRouteChange = () => {
  scrollToSection()
}

onMounted(() => {
  fetchSolutionsList()
  window.addEventListener('hashchange', handleRouteChange)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('hashchange', handleRouteChange)
})
</script>

<style lang="scss" scoped>
.solutions-container {
  padding: 0 0 80px;  // 不设置顶部padding，banner直接贴顶
  background: #f8f9fa;
  min-height: 100vh;

  .solutions-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
</style>